<script lang="ts" setup>
import MainCenter from '@/layout/MainCenter/index.vue'
import { ref } from 'vue'
import Driver from '@/components/Driver/index.vue'
import {getTimeLineConfig} from '@/api/archive'
import { useRouter } from "vue-router";
import {encryData} from "@/utils/utils";
const router = useRouter()
let timeLineConfig = ref([])

let requestArchiveConfig = async () => {
    let data:any = await getTimeLineConfig()
    if(data.code == 200) {
        timeLineConfig.value = data.mapConfig
        console.log('timeLineConfig',timeLineConfig.value);
        return
    }
}
requestArchiveConfig()

interface articleItem {
  articleId:number,
  articleTitle:string
}

let articleTitleHandler = (article:articleItem) => {
  let articleId = encryData(article.articleId)
  router.push({name:"Detail",params:{articleId}})
}

</script>

<template>
  <MainCenter class="main">
    <div class="time-line-container">
        <Driver title="时间轴"></Driver>
        <a-timeline>
            <a-timeline-item v-for="(first,index) in timeLineConfig" :key="index">
                <p><span class="year">{{ first[0] }}</span></p>
                <p class="time-item-info" v-for="(secend,index) in first[1].list">
                   <span class="month"> {{secend.month }}</span>
                   <span>-</span>
                   <span class="day">{{ secend.day }}</span>
                   <span class="title" @click="articleTitleHandler(secend)">{{ secend.articleTitle }} </span>
                </p>
            </a-timeline-item>
        </a-timeline>
    </div>
  </MainCenter>
</template>


<style lang="scss" scoped>

.time-line-container {
    width: 100%;
    .ant-timeline-item-content {
        width: 100%;
    }
    margin-top: 1.5rem;
    .time-line-title {

    }
    .year {
        font-size: 18px;
        font-weight: bold;
    }
    .time-item-info {
        cursor: pointer;
        position: relative;
        width: max-content;
        max-width: 70%;
        transition: .5s all;
        margin: 1.5rem 0px;
        &:hover {
            color: rgb(44, 44, 204);
            transform: translateX(10px);
            &::after {
                opacity: 1;
            }
        }
        &::after {
            opacity: 0.1;
            position: absolute;
            left: -13px;
            top: 50%;
            transform: translate(0, -50%);
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            transition: .5s all;
            background: rgb(44, 44, 204);
        }
        .month,.day {
            font-size: 16px;
            font-weight: 600;
        }
        .day {
            margin-right: 15px;
        }
        .title {
            font-size: 14px;
            font-weight: 500;
        }
    }
}
</style>